<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--suppress ALL-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>领养中心|蜗牛宠物领养平台</title>

    <link rel="shortcut icon" th:href="@{/asserts/images/favicon.ico}" type="image/x-icon"/>
    <!-- Bootstrap的css -->
    <link rel="stylesheet" th:href="@{/asserts/bootstrap3.4.1/css/bootstrap.min.css}">
    <!-- jQuery本地-->
    <script th:src="@{/asserts/js/jQuery-3.6.0.js}"></script>
    <!-- 加载本地js -->
    <script th:src="@{/asserts/bootstrap3.4.1/js/bootstrap.min.js}"></script>
    <!-- 加载common.css -->
    <link rel="stylesheet" th:href="@{/asserts/css/common.css}"/>
    <!-- 加载页头页尾css -->
    <link rel="stylesheet" th:href="@{/asserts/css/top.css}"/>
    <link rel="stylesheet" th:href="@{/asserts/css/foot.css}"/>
    <!-- 加载页头页尾js -->
    <script th:src="@{/asserts/js/top.js}"></script>
</head>
<body>
<!-- 页头 -->
<nav th:replace="nav::headerBar"></nav>
<div class="container" >
    <div style="height: 70px;width: 1100px;">
        <br>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <label style="font-size: 15px;">宠物类型:</label>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <label style="font-size: 15px;">全选</label>
        <input name="category" value="0" required type="radio" checked style="width: 15px; height: 15px;">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <label style="font-size: 15px;">猫</label>
        <input name="category" value="1" required type="radio" style="width: 15px; height: 15px;">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <label style="font-size: 15px;">狗</label>
        <input name="category" value="2" required type="radio" style="width: 15px; height: 15px;">
        <br>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <label style="font-size: 15px;">性别:</label>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <label style="font-size: 15px;">全选</label>
        <input name="sex" value="0" required type="radio" checked style="width: 15px; height: 15px;">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <label style="font-size: 15px;">雄性</label>
        <input name="sex" value="1" required type="radio" style="width: 15px; height: 15px;">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <label style="font-size: 15px;">雌性</label>
        <input name="sex" value="2" required type="radio" style="width: 15px; height: 15px;">

        <br>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <label style="font-size: 15px;">城市:</label>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <label style="font-size: 15px;">全选</label>
        <input name="city" value="0" required type="radio" checked style="width: 15px; height: 15px;">
        <span th:each="c : ${cityList}" style="margin-left: 10px;">
            <label style="font-size: 15px;" th:text="${c}"></label>
            <input name="city"  required type="radio" style="width: 15px; height: 15px;" th:value="${c}">
        </span>

    </div>
    <div style="height: 500px;width:1100px;padding-left: 100px;">
        <div th:each="p : ${pagePet.list}"
             style="width:300px;float: left;margin-top: 70px;margin-left: 10px;text-align: center;">
            <a th:href="@{/pet/petDetail(id=${p.id})}">
                <!--img th:src="${p.image}" style="width: 240px;height:240px;border-radius: 100%;cursor: pointer;">-->
                <img th:src="'https://woniu-adopt.oss-cn-hangzhou.aliyuncs.com/adoptImages/'+${p.image}" style="width: 240px;height:240px;border-radius: 100%;cursor: pointer;">
            </a><br>
            <span th:text="${p.name}" style="font-size: 40px;"></span><br>
            简介：<span th:text="${p.introduce}"></span>
        </div>
    </div>
    <div>
        <span class="btn-lg" style="margin-left: 100px;">总宠物数:</span><span class="btn-lg"
                                                                               th:text="${pagePet.total}"></span>
        <span class="btn-lg">总页数:</span><span class="btn-lg" th:text="${pagePet.pages}"></span>
        <span class="btn-lg">当前页:</span><input id="jumpNow" style="width: 25px;" th:value="${pagePet.pageNum}">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" class="btn btn-success" onclick="jump()">跳转</button>
        <button type="button" class="btn btn-success btn-lg" style="margin-left: 100px;" onclick="go(1)">首页</button>
        <button type="button" class="btn btn-success btn-lg" th:onclick="go([[${pagePet.prePage}]])">上一页</button>
        <button type="button" class="btn btn-success btn-lg" th:onclick="go([[${pagePet.nextPage}]])">下一页</button>
        <button type="button" class="btn btn-success btn-lg" th:onclick="go([[${pagePet.pages}]])">尾页</button>
    </div>
</div>
<!-- 页尾 -->
<footer th:replace="nav::footBar"></footer>
</body>
<script>
    function go(now) {
        let category=$('input[name="category"]:checked').val();
        let sex=$('input[name="sex"]:checked').val();
        let city=$('input[name="city"]:checked').val();
        if (now == 0) {
            return;
        } else {
            let url = '[[@{/pet/list}]]' + '?now=' + now+'&category='+category+'&sex='+sex+'&city='+city;
            window.location.href = url;
        }
    }

    function jump() {
        let now = $("#jumpNow").val();
        go(now);
    }

    window.onload=function echo(){
        let category='[[${pet.category}]]';
        let sex='[[${pet.sex}]]';
        let city='[[${city}]]';
        $("input[type=radio][name=category][value="+category+"]").attr("checked",'checked');
        $("input[type=radio][name=sex][value="+sex+"]").attr("checked",'checked');
        $("input[type=radio][name=city][value="+city+"]").attr("checked",'checked');
    }

    $(document).ready(function() {
        $("input[type=radio]").click(function () {
            go(1);
        });
    });
</script>
</html>